<template>
  <div class="container" style="background: rgba(221, 221, 221);padding-bottom:50px;height:100vh">
    <div class="titleBackground">
      <div class="titleName">
        <div class="whiteCard" v-if="userInfo">
          <div class="leftImg">
            <div class="imageCircle">
              <img class="image" :src="userInfo.avatar">
            </div>
          </div>
          <div class="text">
            <p class="topName">
              <span style="font-weight:bold">普通用户</span>
              <ul class="Star" style="display:inline-block;margin-left:5px">
                <!-- <li class="iconfont icon--wujiaoxing"></li>
                <li class="iconfont icon--wujiaoxing"></li>
                <li class="iconfont icon--wujiaoxing"></li>
                <li class="iconfont icon--wujiaoxing"></li>
                <li class="iconfont icon--wujiaoxing"></li> -->
              </ul>
            </p>
            <p class="intermediateText">昵称：{{userInfo.username}}</p>
            <div style="position:absolute;left:10px">
              <div style="color:#000;display:inline-block;margin:0 10px">
                <img style="width:20px;height:18px;line-height: 18px;position: relative;top:3px;" src="../../assets/image/recharge.png" alt="">
                <span style="height:30px;line-height:30px;display:inline-block;text-align:center;margin:0 5px">充值</span>
              </div>
              <div style="color:#000;display:inline-block;margin:0 10px">
                <img style="width:20px;height:18px;line-height: 18px;position: relative;top:3px;" src="../../assets/image/payment.png" alt="">
                <span style="height:30px;line-height:30px;display:inline-block;text-align:center;margin:0 5px">付款</span>
              </div>
            </div>
          </div>
          <div class="rightModule">
            <span class="rightTopNotice cardrightText">
              <span class="texts" style="color:#fff">在线消息<i class="iconfont icon-xiaoxi" style="color:rgb(255,125,121);margin:0 0 2px 6px"></i></span>
            </span>
            <span class="discountnotice">积分</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tables">
      <van-tabs style="border-radius:10px;border:1px solid #ccc;overflow:hidden" :line-width="0" :swipe-threshold="5" title-active-color="#212121" v-model="active">
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column">
            <img style="width: 33px;height: 34px;padding: 0;margin: 0 auto;" :src="require('../../assets/image/shezhi.png')" />
            <span class="tablesTitleText">订单</span>
          </div>
          <div class="commodityList">
            <ul>
              <li @click="()=>{$router.push({path:'/orderListpage',query:{id:0}})}">
                <div>
                  <span class="iconfont icon-daifukuan"></span>
                  <p>待发货</p>
                </div>
              </li>
              <li @click="()=>{$router.push({path:'/orderListpage',query:{id:1}})}">
                <div>
                  <span class="iconfont icon-daifahuo"></span>
                  <p>已发货</p>
                </div>
              </li>
              <li @click="()=>{$router.push({path:'/orderListpage',query:{id:2}})}">
                <div>
                  <span class="iconfont icon-pintuan-"></span>
                  <p>已收货</p>
                </div>
              </li>
              <li>
                <div>
                  <span class="iconfont icon-tuihuanhuo"></span>
                  <p>退换货</p>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column">
            <img style="width: 33px;height: 34px;margin: 0 auto;" :src="require('../../assets/image/huihua.png')" alt />
            <span class="tablesTitleText">市场</span>
          </div>
          <!-- <div style="margin-bottom:40px">
            <van-collapse v-model="activeName" accordion>
              <van-collapse-item title="标题1" v-for="(item,i) in marketItem" :key="i"  :name="i">
                <div slot="title" class="market">
                  <img :src="item.avatar" alt="">
                  <div>
                    <p>用户:{{item.userName}} {{item.certified?'已实名':'未实名'}}</p>
                    <p>业绩:{{item.achievement}}</p>
                    <p>注册日期:{{item.createDate}}</p>
                  </div>
                </div>
                <div>
                <div class="market" v-for="(list,i) in item.children" :key="i">
                  <img :src="list.avatar" alt="">
                  <div>
                    <p>用户名:{{list.userName}} {{list.certified?'已实名':'未实名'}}</p>
                    <p>业绩:{{list.achievement}}</p>
                    <p>注册日期:{{list.createDate}}</p>
                  </div>
                </div>
                </div>                
                </van-collapse-item>
            </van-collapse>
          </div> -->
          <div id="app" class="centent ">
            <div class="treebox scrollXY ">
              <div class="tree">
                <ul>
                  <li v-for="item in message" :key="item.name" style="position:relative;top:0;">
                    <div class="open_menu " style="">
                      <span></span>
                      {{item.name}}
                      <div class="itemSty">
                        <div style="display:inline-block;" v-if="item.financialSingular||item.financialSingular===0">({{item.financialSingular}}单)</div>
                        <div v-if="item.number||item.number === 0">{{item.number+'人'}}</div>
                      </div>
                    </div>
                    <ul style="color:#666">
                      <li class="aaa" v-for="two in item.twolevel" :key="two.name">
                        <div class="open_menu"><span></span>{{two.name}}
                          <div class="itemSty">
                            <div style="display:inline-block;" v-if="two.financialSingular||two.financialSingular===0">{{two.financialSingular}}单</div>
                          </div>
                        </div>
                        <ul>
                          <li v-for="three in two.ThreeMenu" :key="three.name">
                            <div class="open_menu"><span></span>{{three.name}}
                              <div class="itemSty">
                                <div style="display:inline-block;" v-if="three.financialSingular||three.financialSingular===0">({{three.financialSingular}}单)</div>
                                {{three.number}}人
                              </div>
                            </div>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column">
            <img style="width: 33px;height: 34px;margin: 0 auto;" :src="require('../../assets/image/shanghui.png')" alt />
            <span class="tablesTitleText">邀请码</span>
          </div>
          <div id="qrcode" style="text-align:center">
            <!-- <div id="qrcode"></div> -->
            <vue-qr :text="qrcodeImage" :size="200"></vue-qr>
            <a id="downloadLink"></a>
          </div>
            <div style="text-align:center">
              <van-button style="border-radius:6px;height:40px;line-height:40px;" @click="downloadClick()">保存到手机</van-button>
              <van-button style="border-radius:6px;height:40px;line-height:40px;" @click="share()">分享到微信</van-button>
            </div>
        </van-tab>
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column">
            <img style="width: 33px;height: 34px;margin: 0 auto;" :src="require('../../assets/image/kongjian.png')" alt />
            <span class="tablesTitleText">资产日志</span>
          </div>
          <div>
            <van-tabs v-model="assetLog" style="border-radius:10px;border:1px solid #ccc;overflow:hidden;min-height:100%" :line-width="0" :swipe-threshold="5" title-active-color="#212121">
              <van-tab title="余额"> </van-tab>
              <van-tab title="股票"></van-tab>
              <div class="assetLogSty" v-for="(list,index) in assetLogItems" :key="index">
                <p>金额:{{list.amount}}</p>
                <p>备注:{{list.remark}}</p>
                <p>类型:{{list.type===0?'余额':'股票'}}</p>
                <p>创建时间:{{list.createDate}}</p>
              </div>
            </van-tabs>
          </div>
        </van-tab>
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column" @click="favoritesList()">
            <img style="width: 33px;height: 34px;margin: 0 auto;" :src="require('../../assets/image/kehu.png')" alt />
            <span class="tablesTitleText">收藏</span>
          </div>
          <div style="background:#fff;padding:10px;border-radius:5px">
            <div style="border-radius:5px;padding: 20px 15px;background:rgb(255,243,245);position: relative;">
              <span style="color:rgb(176,103,84);font-size:15px">2个宝贝有动态</span>
              <i class="iconfont icon-left1" style="position:absolute;right:10px;top:25px"></i>
            </div>
            <div>
              <van-card v-for="item in commodity" :key="item.name" style="margin:5px 0">
                <span slot="desc" style="margin:6px 0;color:#999">
                  {{item.info}}
                </span>
                <span slot="title" style="height:16px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                  {{item.name}}
                </span>
                <div slot="thumb">
                  <img style="width:80px;height: 90px;" :src="item.image" alt="">
                </div>
                <div slot="tags">
                  <span style="color: rgb(211,150,122);font-size:12px;background: rgb(251,237,222)">{{item.tag}}</span>
                </div>
                <div slot="price" style="margin-top:10px">
                  ￥{{item.price}}
                </div>
              </van-card>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
import QRCode from "qrcodejs2";
// import wx from "weixin-js-sdk";
import vueQr from "vue-qr";
import $ from 'jquery'
//  import VueQr from 'vue-qr'
export default {
  data: () => ({
    imageUrl:
      "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1802553443,2497346274&fm=26&gp=0.jpg",
    qrcodeImage: "",
    activeName: "1",
    active: 0,
    assetLog: 0,
    dz: "www.baidu.com",
    marketItem: [],
    assetLogItems: [],
    orderList: [], //商品订单列表
    qrcode: null,
    commodity: [
      {
        name: "遥控机器人玩具会跳舞智能语音对话早教编程高科技儿童玩具",
        info: "28786人收藏",
        tag: "比收藏时降价10.00元",
        price: "78.00",
        image: require("../../assets/image/robot.png")
      }
    ],
    message: [
      {
        name: "市场业绩",
        number: 0,
        twolevel: [
          {
            name: "成交单数",
            financialSingular: 2
          },
          {
            name: "分享列表",
            financialSingular: 0
          }
        ]
      },
      {
        name: "财务管理",
        number: 0,
        twolevel: [
          {
            name: "余额"
          },
          {
            name: "分享收益",
            ThreeMenu: [
              {
                number: 0,
                name: "销售提成"
              },
              {
                number: 0,
                name: "管理咨询"
              }
            ]
          },
          {
            name: "股票",
            ThreeMenu: [
              {
                name: "股票明细"
              }
            ]
          },
          {
            name: "消费券",
            ThreeMenu: [
              {
                name: "卷源明细"
              }
            ]
          }
        ]
      },
      {
        name: "市场收益",
        number: 0,
        twolevel: [
          {
            name: "品牌推广"
          },
          {
            name: "差旅补贴"
          },
          {
            name: "分店管理"
          }
        ]
      },
      {
        name: "全球分红"
      },
      {
        name: "共产基金"
      },
      {
        name: "加盟连锁",
        twolevel: [
          {
            name: "提交申请"
          },
          {
            name: "我的店铺"
          },
          {
            name: "分店管理"
          }
        ]
      },
      {
        name: "会议直播"
      }
    ]
  }),
  components: {
    vueQr
  },
  computed: {
    userInfo() {
      return JSON.parse(this.$store.state.memberInfo);
    },
    token() {
      return JSON.parse(this.$store.state.userInfo);
    }
  },
  created() {
    window.console.log(this.userInfo);
    if (this.userInfo) {
      this.qrcodeImage = `http://www.ym718.com/#/Recommend?code=${this.userInfo.referralCode}`;
    }
    this.$axios.get(`ym/memberuser/user-recommend`).then(res => {
      window.console.log(res);
      if (res.code === 0) {
        this.marketItem = res.data;
      } else {
        this.$Toast("获取失败！");
      }
    });
    this.$axios.get(`ym/mall-order/list?page=1&limit=5&status=0`).then(res => {
      console.log(res);
      if (res.code === 0) {
        this.orderList = res.data.records;
      } else {
        this.$Toast("获取订单列表失败!");
      }
    });
    this.getAssetLog(0);
  },
  watch: {
    active(newValue) {
      console.log(newValue);
      if (newValue === 1) {
        let a = document.querySelectorAll(".ontree");
        console.log(a);
      }
    },
    assetLog(newValue) {
      console.log(newValue);
      this.getAssetLog(newValue);
    }
  },
  mounted() {
    //  this.qrcode();
    //console.log(this.$store.state.memberInfo)
  },
  methods: {
    getAssetLog(type) {
      this.$axios.get(`ym/asset-log/list?type=${type}`).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.assetLogItems = res.data.records;
        } else {
          this.$Toast("获取日志失败！");
        }
      });
    },
    favoritesList() {
      this.$axios
        .get(`ym/member-collect/list?type=1&page=1&limit=15`)
        .then(msg => {
          if (msg.data.code === 0) {
            let data = msg.data.data.records;
            data.forEach(list => {
              this.commodity.push({
                name: list.productName,
                info: "",
                tag: "",
                price: list.retailPrice,
                image: list.mainImage
              });
            });
            //console.log(msg.data.data.records)
          }
          //console.log(msg)
        });
    },
    qrcodeScan() {
      console.log(this.userInfo.referralCode);
      var img = document
        .getElementById("qrcode")
        .getElementsByTagName("img")[0];
      if (!img) {
        this.qrcode = new QRCode("qrcode", {
          width: 200,
          height: 200,
          logoSrc:
            "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1802553443,2497346274&fm=26&gp=0.jpg",
          text: `http://www.ym718.com/#/Recommend?code=${this.userInfo.referralCode}`
        });
      } else {
        return;
      }
    },
    downloadClick() {
      // 获取base64的图片节点
      // 获取base64的图片节点
      var img = $("#qrcode img")[0];
      // 构建画布
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      canvas.getContext("2d").drawImage(img, 0, 0);
      // 构造url
      let url = canvas.toDataURL("image/png");
      // 构造a标签并模拟点击
      var downloadLink = $("#downloadLink")
        .attr("href", url)
        .attr("download", "二维码.png");
      downloadLink[0].click();
    },

    share() {
      let _this = this;
      console.log("click");
      try {
        this.$store.state.nativeShare.setShareData({
          icon:'',
          link:`http://www.ym718.com/#/Recommend?code=${_this.userInfo.referralCode}`,
          title: '圆梦网络',
          desc: '圆梦网络',
          from: "@fa-ge"
        });
        this.$store.state.NativeShare.call("wechatFriend");
      } catch (err) {
        // 如果不支持，你可以在这里做降级处理
        alert('抱歉,您当前使用的浏览器不支持分享!')
      }
      // this.$axios.get(`ym/public/wechat-share`).then(res => {
      //   wx.config({
      //     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      //     appId: res.data.appid, // 必填，公众号的唯一标识
      //     timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      //     nonceStr: res.data.noncestr, // 必填，生成签名的随机串
      //     signature: res.data.signature, // 必填，签名
      //     jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
      //   });
      // });
      // wx.ready(function() {
      //   console.log("wx : success");
      // });
      // setTimeout(() => {
      //   wx.updateAppMessageShareData({
      //     title: "圆梦网络", // 分享标题
      //     desc: "圆梦网络", // 分享描述
      //     link: `http://www.ym718.com/#/Recommend?code=${_this.userInfo.referralCode}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //     imgUrl:
      //       "", // 分享图标
      //     success: function() {
      //       // 设置成功
      //       _this.$Toast("点击右上角进行分享");
      //     }
      //   });
      //   wx.updateTimelineShareData({
      //     title: "圆梦网络", // 分享标题
      //     link: `http://www.ym718.com/#/Recommend?code=${_this.userInfo.referralCode}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //     imgUrl:
      //       "", // 分享图标
      //     success: function() {
      //       // 设置成功
      //       // alert("点击右上角分享-朋友圈");
      //     }
      //   });
      // }, 2000);
    }
  }
};
</script>
<style lang='scss'>
@import "../../assets/css/mine_copy.scss";
@import "../../assets/css/tree.css";
.Star {
  li {
    float: left;
    color: rgb(189, 119, 26);
  }
}

.cardrightText {
  width: 90px !important;
}
.commodityList {
  background: #fff;

  ul {
    li {
      padding: 20px;
      border-bottom: 1px solid #ccc;

      span {
        margin-left: 3px;
        color: #666;
        font-size: 30px;
      }

      p {
        font-size: 13px;
        color: #666;
        margin: 0;
        padding: 0;
      }
    }
  }
}
.itemSty {
  display: inline-block;
  position: absolute;
  right: 20px;
  color: #666;
  padding: 5px;
  height: 10px;
  line-height: 10px;
}
.assetLogSty {
  font-size: 14px;
  color: #666;
  padding: 5px;
  margin:4px;
  border-radius: 4px;
  background: #fff;
  border:1px solid #eee;
  p {
    padding: 2px 0;
    margin: 0;
  }
}
</style>